import React, { Component } from 'react';
import { Card } from 'antd';
import Pagination from '../../util/pagination';

import Mutil from '../../util/mm.js';
import User from '../../server/user-server.js';

const _mm = new Mutil();
const _user = new User();

class UserList extends Component{
	constructor(props){
		super(props);
		this.state = {
			list   : [],
			pageNum: 1,
			firstLoading : true
		}
	}
	componentDidMount(){
		this.loadUserList();
	}
	loadUserList(){
		_user.getUserList(this.state.pageNum).then((res)=>{
			this.setState(res, ()=>{
				this.setState({
					firstLoading : false
				})
			})
		},errMag =>{
			this.setState({
				list: []
			})
			_mm.errorTips(errMag)
		});
	}
	//当页数发生变化的时候
	onPageNumChange(pageNum){
		this.setState({
			pageNum: pageNum
		}, ()=>{
			this.loadUserList()
		})
	}
	render() {
		let listBody = this.state.list.map((user, index)=>{
						return(
							<tr key={index}>
								<td>{user.id}</td>
								<td>{user.username}</td>
								<td>{user.email}</td>
								<td>{user.phone}</td>
								<td>{new Date(user.createTime).toLocaleString()}</td>
							</tr>
						);
					});
		let listError = (
			<tr>
				<td colSpan="5" className="text-center">
					{this.state.firstLoading ? '正在加载...' : '没有找到相应的结果'}
				</td>
			</tr>
		);
		let tableBody = this.state.list.length > 0 ? listBody : listError;
		return (
			<Card title="用户管理">
				<div className="row">
					<div className="col-md-12">
						<table className="table table-striped">
							<thead>
								<tr>
									<th>id</th>
									<th>用户名</th>
									<th>邮箱</th>
									<th>电弧</th>
									<th>注册时间</th>
								</tr>
							</thead>
							<tbody>
								{tableBody}	
							</tbody>
						</table>
					</div>
				</div>
				<Pagination
					current={this.state.pageNum}
					total={this.state.total}
					onChange={(pageNum)=>this.onPageNumChange(pageNum)}
				 />
			</Card>
		);
	}
}

export default UserList;